<template>
  <div :style="'height:' + maxHeight + 'px'">
    <div class="typenamelist">
      <div class="div-b86b6a" @click="queryCardType(index + 1)" v-for="(item, index) in typeNameList" :key="index">
        <img class="img-a167c6" :src="typeNameImgList[index]" /><span
          class="span-828b4b"
          >{{item.creditTypeName}}
        </span>
      </div>
    </div>
    <md-scroll-view v-if="isshow" ref="scrollView" :scrolling-x="false" @end-reached="more" :auto-reflow="true" :end-reached-threshold="180">
      <md-row class="row-01bfff" v-for="(item, index) in imgList" :key="index">
        <md-col :span="24">
          <span class="span-436fe7">{{item.creditTypeName}}</span>
          <div class="div-b76923">
            <img class="img-22f309" :src="item.picUrl" />
          </div>
        </md-col>
        <md-col :span="24" class="creditDesc">
          <div class="div-ed61bf">
            <md-button
              :type="'primary'"
              :nativeType="'button'"
              :size="'small'"
              :plain="false"
              :round="true"
              :inline="false"
              :icon="''"
              :icon-svg="false"
              :inactive="false"
              @click.prevent="iNeedCard(item)"
              :iconAlign="'left'"
              >{{ widget_1b5c20.options.defaultValue }}</md-button
            >
          </div>
          <span class="span-32c83e">{{ widget_7a6e88.options.content }}</span>
          <span class="span-d8c47b">{{ widget_3f8804.options.content }}</span>
          <span class="span-8c0a96">{{item.creditTypeDesc}}</span>
          <span class="span-8c0a96">具体详情请查看官网</span>
          <span class="span-f3a8c0" @click.stop="yearCoatRuleClick">{{
            widget_a1f7df.options.content
          }}</span>
        </md-col>
      </md-row>
      <md-scroll-view-more slot="more" :is-finished="isFinished">
      </md-scroll-view-more>
    </md-scroll-view>
    <div v-if="imgList.length === 0" class="nodata">
      <img src="../assets/img/nodata.png" alt="">
      <p>暂无数据</p>
    </div>
    <md-dialog
      title="年份规则"
      :closable="true"
      v-model="basicDialog.open"
      :btns="basicDialog.btns"
    >
      100元人名币/套/年，年费将于激活后收取，首年免年费，刷卡满三笔减免次年年费
    </md-dialog>
  </div>
</template>

<script>
import api from '../assets/js/url'
export default {
  data() {
    return {
      maxHeight: '',
      isFinished: false,
      basicDialog: {
        open: false,
        btns: [
          {
            text: "确定",
            handler: this.onBasicCancel
          }
        ]
      },
      widget_59907a: {
        name: "文本框",
        options: {
          path: "",
          content: "光明勇士联名信用卡"
        },
        rules: []
      },
      widget_666028: {
        name: "图片",
        options: {
          imageUrl:
            "http://118.144.87.37:13083/group1/M00/00/39/CgIEq11OeUWAHf-NAADbzzh1nYA011.jpg"
        },
        rules: []
      },
      widget_1b5c20: {
        name: "按钮",
        options: {
          defaultValue: "我要办卡",
          submitFunc:
            "/app/wiremock/D5419E20385D4A469B1383CF9183B6FD/transferResults.do",
          iconFlag: false
        },
        rules: []
      },
      widget_7a6e88: {
        name: "文本框",
        options: {
          path: "",
          content: "新湖首刷礼|游戏礼包"
        },
        rules: []
      },
      widget_3f8804: {
        name: "文本框",
        options: {
          path: "",
          content: "月月刷卡增不停"
        },
        rules: []
      },
      widget_490b52: {
        name: "文本框",
        options: {
          path: "",
          content: "游戏道具特权"
        },
        rules: []
      },
      widget_70eb19: {
        name: "文本框",
        options: {
          path: "",
          content: "具体详询我行官网"
        },
        rules: []
      },
      widget_a1f7df: {
        name: "文本框",
        options: {
          path: "",
          content: "年费规则"
        },
        rules: []
      },
      imgList: new Array(1),
      typeNameList: [],
      typeNameImgList: [
        require('../assets/img/01.png'),
        require('../assets/img/02.png'),
        require('../assets/img/03.png'),
        require('../assets/img/04.png'),
        require('../assets/img/05.png'),
        require('../assets/img/06.png'),
        require('../assets/img/07.png'),
        require('../assets/img/08.png')
      ],
      total: '',
      pageNum: 1,
      type: '',
      isshow: true
    }
  },
  methods: {
    queryCardType (type) {
      this.isshow = false
      this.isFinished = false
      this.type = type
      let params = {
        pageNum: 1,
        pageSize: 5,
        keyword: '0' + type
      }
      this.$remote(api.QUERY_CARD_TYPE, params)
        .then(res => {
          console.log(res)
          this.imgList = res.list
          console.log('+++++++++', this.imgList)
          this.total = res.totalCount
          console.log('+++++++++', this.total)
          this.imgList.length === this.total ? this.isFinished = true : this.isFinished = false
          this.imgList.length > 0 ? this.isshow = true : this.isshow = false
          console.log('this is isfinished', this.isFinished)
        })
      sa.track('$CollectCreditTypeClick', {
        '$element_content': type
      })
    },
    queryTypeName () {
      this.$remote(api.QUERY_TYPE_NAME, {})
        .then(res => {
          console.log('this is typename', res)
          this.typeNameList = res
        })
    },
    handClick () {},
    more () {
      console.log('this is isfinished', this.isFinished)
      if (this.isFinished) {
        return
      }
      let params = {
        pageNum: ++this.pageNum,
        pageSize: 5,
        keyword: '0' + this.type
      }
      this.$remote(api.QUERY_CARD_TYPE, params)
        .then(res => {
          console.log('res.list', res.list)
          this.imgList.push(...res.list)
          console.log('-------', this.imgList)
          this.imgList.length === this.total ? this.isFinished = true : this.isFinished = false
          this.imgList.length > 0 ? this.isshow = true : this.isshow = false
        })
      this.$refs.scrollView.finishLoadMore()
    },
    yearCoatRuleClick() {
      this.basicDialog.open = true;
    },
    onBasicCancel() {
      this.basicDialog.open = false;
    },
    iNeedCard (data) {
      console.log(data)
      sa.track('$CollectGetCreditClick', {
        '$element_content': data.id
      })
      this.$router.push({
        name: "selectCard",
        query: data
      });
    }
  },
  mounted () {
    sa.track('$pageview', {
      '$url_path': 'credit'
    })
    console.log('height++++', document.documentElement.clientHeight)
    this.queryCardType('1')
    this.queryTypeName()
  },
  created () {
    this.maxHeight = document.documentElement.clientHeight - 180
  }
};
</script>

<style scoped>
.md-button.primary::after {
  border: 1px solid #06469e;
}
.md-button.primary {
  background-color: #06469e;
}
.div-b86b6a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-direction: column;
  width: 25%;
}
.span-828b4b {
  display: block;
  padding-left: 0px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
}
.img-a167c6 {
  display: block;
  border: 0px solid #dedede;
  height: 30px;
  width: 30px;
  border-radius: 0px;
}
.typenamelist {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  margin-bottom: 10px;
}
.credit-card {
  height: 100%;
}
.span-436fe7 {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  display: block;
  height: 30px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 180px;
}

.div-b76923 {
  height: auto;
  width: 100%;
}

.img-22f309 {
  display: block;
  height: 122px;
  width: 178px;
  margin: auto;
  border: 0px solid #dedede;
  border-radius: 0px;
}

.div-ed61bf {
  /* margin-top: 20px;
  margin-bottom: 2px;
  margin-left: 20px;
  margin-right: 20px; */
  padding-right: 10px;
  display: inline-block;
  width: 90px;
}

.creditDesc {
  text-align: right;
}

.span-32c83e {
  margin-top: 15px;
  font-size: 14px;
  display: block;
  height: 20px;
  text-align: right;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 20px;
}

.span-d8c47b {
  font-size: 14px;
  display: block;
  height: 20px;
  text-align: right;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 20px;
}

.span-8c0a96 {
  font-size: 14px;
  display: block;
  height: 20px;
  text-align: right;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 20px;
}

.span-39d1d7 {
  font-size: 14px;
  display: block;
  height: 14px;
  text-align: right;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 14px;
}

.span-f3a8c0 {
  color: #06469e;
  margin-top: 6px;
  font-size: 14px;
  display: inline-block;
  height: 14px;
  text-align: right;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 20px;
}

.row-01bfff {
  border-radius: 0px;
  padding: 15px 0;
  margin: 0px;
  border-bottom: 1px solid rgb(216, 216, 216);
}
</style>
